<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示类型</title>
    <style type="text/css">
        div{
            border:solid 1px #f00;
            width: 100px;
            height: 101px;
        }
        #div2{
            display: none;
        }
        #a1{
            display: block;
        }
        span{
            display: list-item;
            margin-left: 20px;
            list-style-type: circle;
        }
        li{
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="div1">显示块</div>
<div id="div2">隐藏块</div>
<a id="a1" href="#">链接</a><span>行内元素</span><span>行内元素</span>
<ul>
    <li><a href="#">导航链接</a> </li>
    <li><a href="#">导航链接</a> </li>
    <li><a href="#">导航链接</a> </li>
</ul>
</body>
</html>